<!-- 门票 -->

<template>
	<uni-nav-bar dark :fixed="true" shadow background-color="#fff" status-bar left-icon="left" left-text="" title="门票订单" @clickLeft="back" />
	<view class="main-collect">
		<nut-tabs v-model="state.oneIndex" @click="oneTab">
			<nut-tab-pane :title="item.name" v-for="(item, index) in state.tabDataOne" :key="index">
				<view class="list" v-if="state.oneIndex == 0" v-for="(item, index) in state.orderData" :key="item.id">
					<view class="list-title">
						{{item.goods_name}}
						<text class="city">{{item.city}}</text>
					</view>
					<view class="list-desc">
						
					</view>
					<view class="list-order">订单编号：{{item.order_sn}}</view>
					<view class="list-order">支付金额：￥{{item.price}}</view>
					<view class="list-order">预约日期：{{item.yuyue_date}}</view>
					<view class="list-image">
						<image :src="item.qrcode" mode=""></image>
					</view>
				</view>
				<view class="list" v-if="state.oneIndex == 1" v-for="(item, index) in state.orderData" :key="item.id">
					<view class="user">
						<view class="left">
							<image :src="item.qrcode" mode=""></image>
						</view>
						<view class="right">
							<view class="list-title type">
								{{item.goods_name}}
								<text class="city">{{item.city}}</text>
							</view>
							<view class="row">订单号：{{item.order_sn}}</view>
							<!-- <view class="row">微信订单号：22267289902877</view> -->
							<view class="row">预约时间：{{item.create_time}}</view>
							<view class="row">订单联系人：{{item.phone}}</view>
							<view class="detail">
								<view class="">
									门票数量：<text>{{item.buy_num}}</text>张
								</view>
								<view class="">
									合计：<text>¥ {{item.price}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</nut-tab-pane>
		</nut-tabs>
		<view class="collect-item" v-for="(item, index) in state.data" :key="index" style="width: 100%">
			<view style="display: flex; align-items: center; justify-content: space-between; width: 100%;">
				<image :src="item.detail[0].goods_img"></image>
				<view class="desc">
					<view class="title">
						<text v-for="(ite, ind) in item.detail" :key="ind">{{ite.goods_name}}
							<text v-if="ind > item.detail.length">、</text>
						</text>
					</view>
					<!-- <view class="time">
						{{item.status? '已使用':'未使用'}}
					</view> -->
					<view class="time">
						{{item.create_time}}
					</view>
				</view>
			</view>
			<view class="piao" v-if="state.oneIndex == 0">
				<view class="but" @click="item.flag = !item.flag">{{item.flag? '打开':'折叠'}}票夹</view>
				<view class="list-image" v-for="(ite, ind) in item.detail" v-show="item.flag">
					<image style="padding-bottom: 40rpx" :src="ite.qrcode" mode=""></image>
					<view class="tit">{{ite.piao_type}}{{ite.status? '（已使用）':'（未使用）'}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { reactive, onMounted } from "vue";
import { ordersList } from '@/request/api/order.js';
const state = reactive({
	data: [],
	tabDataOne: [
		{ name: '已支付', index: 1 },
		{ name: '未支付', index: 0 },
	],
	orderData: [],
	oneIndex: 0,
	pages: {
		page: 1,
		limit: 10,
		model: 1,  // 1 门票  0 商品
		status: 1,
	}
})

onMounted(() => {
	getData();
})

// 首页信息
const getData = async () => {
	try {
		// status  0 未付款  1是已付款
		const data = { model: 0, status: state.pages.status };
		const resultData = await ordersList(data);
		resultData.data.list.map(item => {item.flag = false});
		console.log(resultData)
		state.data = resultData.data.list;
	} catch (e) { }
}


// 小分类
const oneTab = (item) => {
	state.pages.status = item.paneKey + 1
	getData()
}

const back = () => {
	uni.navigateBack({
		delta: 1
	})
}
</script>

<style lang="scss" scoped>
	.main-collect {
		.collect-item {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx solid #E5E4E4;
			padding: 24rpx;
			box-sizing: border-box;
			margin: 0rpx 24rpx;
			image {
				width: 144rpx;
				height: 144rpx;
				border-radius: 20rpx;
			}
			.desc {
				flex: 1;
				margin-left: 36rpx;
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #1C1919;
				line-height: 40rpx;
				.title {
					font-size: 32rpx;
					font-weight: 600;
					color: #1C1919;
				}
				.time {
					margin-top: 20rpx;
				}
			}
		}
	}
	
	.piao {
		.but {
			width: 200rpx;
			height: 50rpx;
			border-radius: 10rpx;
			padding: 10rpx !important;
			text-align: center;
			display: flex;
			align-items:center;
			justify-content: center;
			margin: 0 auto;
			border: 1px dashed #9F9F9F;
			margin-bottom: 20rpx;
			margin-top: 20rpx;
		}
		.list-image {
			width: 356rpx;
			height: 430rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			border: 1rpx solid #E5E4E4;
			margin: 0 auto;
			margin-top: 12rpx;
			margin-bottom: 40rpx;
			.tit {
				text-align: center;
			}
			image {
				width: 316rpx;
				height: 316rpx;
				padding: 20rpx !important;
			}
		}
	}
</style>